var ImportMaterialRecord = function () {
  var SearchForm = function () {
    var template = /* html */ `
      <div class="search-form">
        <el-form label-width="calc(4em + 12px)" :inline="true">
          <el-form-item label="物料名称">
            <el-input class="form-input" v-model="search.materialName"></el-input>
          </el-form-item>
          <el-form-item label="规格型号">
            <el-input class="form-input" v-model="search.model"></el-input>
          </el-form-item>
          <el-form-item label="编号">
            <el-input class="form-input" v-model="search.color"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input class="form-input" v-model="search.colorDescription"></el-input>
          </el-form-item>
        </el-form>
      </div>
    `;

    return {
      props: {
        search: {
          type: Object,
          required: true
        }
      },

      data: function () {
        return {};
      },

      template: template
    };
  }();

  var template = /* html */ `
    <div class="import-material-record" v-loading.fullscreen.lock="loading">
      <div class="handle-form">
        <search-btn-view btn-text="查询物料" @before-open="resetSearch" @search="searchData">
          <div slot="search-content">
            <search-form :search="search"></search-form>
          </div>
        </search-btn-view>
      </div>
      <div class="material-record-table-div">
        <template v-if="recordList.length>0">
          <card-mode :material-list="recordList" @detail="lookDetail" :has-handle="true" mode-type="import">
          </card-mode>
        </template>
        <div class="no-data" v-else>暂无物料数据</div>
      </div>
      <table-pagination v-if="pagination.totalCount!==0" :pagination="pagination" @change="pageChange"></table-pagination>
    </div>
  `;

  return {
    mixins: [
      tablePaginationMixin()
    ],

    data: function () {
      var search = {
        materialName: '',
        model: '',
        color: '',
        colorDescription: ''
      };
      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        recordList: [],
        classifyList: [],
        classifyData: null
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      this.setClassifyList().then(function () {
        self.loading = false;
        self.setRecordList(true);
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      setClassifyList: function () {
        var self = this;
        return ajaxRequest('shoppingMall/getShoppingCallMaterialType').then(function (materialTypeList) {
          var classifyData = new MaterialClassifyModel(materialTypeList);
          self.classifyData = classifyData;
          self.classifyList = classifyData.treeData;
          return classifyData;
        });
      },

      setRecordList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize
        };

        var search = this.search;
        var fields = ['materialName', 'model', 'color', 'colorDescription'];
        SysUtil.setPostData(postData, search, fields);

        var self = this;
        return ajaxRequest('shoppingMall/getShoppingCallImportToCompanyRecord', postData).then(function(res){
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var recordList = res.returnData;
          recordList = ModuleUtil.getFormatMaterialList(recordList, undefined, ['materialCode']);
          
          self.recordList = recordList;
          self.pagination.totalCount = res.iTotalRecords;
          return recordList;
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {

      },

      pageChange: function () {

      },

      lookDetail:function(){

      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm,
      CardMode: CardMode
    },

    template: template
  };
}();